<template>
  <div class="sidebar-wrapper">
    <Logo v-if="showLogo"
          :collapse="isCollapse" />
    <ScrollPanel>
      <!-- 测试展开收起 -->
      <!-- <h6 @click="isCollapse=!isCollapse"
          style="color:#fff">展开测试</h6> -->
      <el-menu class="sidebar-container-menu"
               :class="{'sidebar-show-logo': showLogo}"
               mode="vertical"
               :default-active="activeMenu"
               :background-color="scssVariables.menuBg"
               :text-color="scssVariables.menuText"
               :active-text-color="themeColor"
               :collapse="isCollapse"
               :collapse-transition="true">
        <SidebarItem v-for="route in menuRoutes"
                     :key="route.path"
                     :item="route"
                     :base-path="route.path" />
      </el-menu>
    </ScrollPanel>
  </div>
</template>
<script lang="ts">
import { useRoute } from 'vue-router';
import { defineComponent, computed, ref } from 'vue';
import variables from '@/styles/variables.scss';
import SidebarItem from './SidebarItem.vue';
import Logo from './Logo.vue';
import { routes } from '@/router';
import { useStore } from '@/store';
import ScrollPanel from '../ScrollPanel.vue';

// 有外链，需要去除menu的router属性（router模式），否则点击外链会影响当前路径
export default defineComponent({
  name: 'Sidebar',
  components: { SidebarItem, Logo, ScrollPanel },
  setup(props) {
    const route = useRoute();
    const store = useStore();
    // 依据路由路径，激活当前对应菜单；页面刷新后也要激活路由对应菜单！
    const activeMenu = computed(() => {
      const { path, meta } = route;
      // 可根据meta.activeMenu指定当前路由激活时，让哪个菜单高亮选中
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    });
    // scss变量
    const scssVariables = computed(() => variables);
    // 菜单展开收起状态，后面放到store更合适
    // const isCollapse = ref(true)
    const isCollapse = computed(() => !store.getters.sidebar.opened);

    // 渲染的路由
    const menuRoutes = computed(() => routes);
    //
    const themeColor = computed(() => store.getters.themeColor);
    const showLogo = computed(() => store.state.settings.siderbarLogo);
    return {
      scssVariables,
      isCollapse,
      activeMenu,
      menuRoutes,
      themeColor,
      showLogo
    };
  }
});
</script>
<style lang="scss" scoped>
.sidebar-wrapper {
  .sidebar-container-menu {
    height: 100vh;
    &.sidebar-show-logo {
      height: calc(100vh - 50px);
    }
  }
}
</style>
